<template>
  <div class="space-tag-analyze">
    <a-card title="图库标签词云">
      <v-chart :option="options" style="height: 320px; max-width: 100%;" :loading="loading" />
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watchEffect } from 'vue'
import { message } from 'ant-design-vue'
import { getSpaceTagAnalyzeUsingPost } from '@/api/spaceAnalyzeController.ts'
import VChart from 'vue-echarts'
import 'echarts'
import 'echarts-wordcloud'

// 定义组件接收的参数
interface Props {
  queryAll?: boolean
  queryPublic?: boolean
  spaceId?: number | string
}

const props = withDefaults(defineProps<Props>(), {
  queryAll: false,
  queryPublic: false,
})

// 图表数据
const dataList = ref<API.SpaceTagAnalyzeResponse[]>([])
const loading = ref(true)

/**
 * 加载数据
 */
const fetchData = async () => {
  loading.value = true
  const res = await getSpaceTagAnalyzeUsingPost({
    queryAll: props.queryAll,
    queryPublic: props.queryPublic,
    spaceId: props.spaceId,
  })
  if (res.data.code === 0) {
    dataList.value = res.data.data ?? []
  } else {
    message.error('获取数据失败，' + res.data.message)
  }
  loading.value = false
}


const options = computed(() => {
  const tagData = dataList.value.map((item) => ({
    name: item.tag,
    value: item.count,
  }))

  return {
    tooltip: {
      trigger: 'item',  // 鼠标悬停到单个时显示数据信息
      formatter: (params: any) => `${params.name}: ${params.value} 次`,  // 显示内容
    },
    series: [       // 系列（数据集，展示出来的内容）
      {
        type: 'wordCloud',    // 展示形式
        gridSize: 10,         // 词间距
        sizeRange: [12, 50], // 字体大小范围
        rotationRange: [-90, 90], // 旋转范围
        shape: 'circle',      // 词云形状
        textStyle: {          // 文本样式
          color: () =>        // 随机颜色
            `rgb(
            ${Math.round(Math.random() * 255)},
            ${Math.round(Math.random() * 255)},
            ${Math.round(Math.random() * 255)}
            )`,
        },
        data: tagData,    // 内容
      },
    ],
  }
})


// 监听变量，改变时触发
watchEffect(() => {
  fetchData()
})
</script>

<style scoped></style>
